joEl.register('form-config-ele-option', {
    props: {
        ele: {
            type: Object,
            default: '',
        },
    },
    data: function () {
        return {};
    },
    template: `
        <div class="form-config-ele-option"
            draggable="true"
            @dragstart.stop.self="dragStartEle($event, ele)"
            @dragend.stop.self="dragEndEle($event, ele)"
        >
            <div class="form-config-icon">
                <i class="fa" :class="ele.icon"></i>
            </div>
            <div class="form-config-ele-name">{{ele.name}}</div>
        </div>
    `,
    methods: {
        dragStartEle(event, ele) {
            this.$root.dragStartEleOption(event, ele);
        },
        dragEndEle(event, ele) {
            this.$root.dragEndEleOption(event, ele);
        },
    },
    mounted() {

    }
});
joEl.register('form-config-ele-wrap', {
    props: {
        ele: {
            type: Object,
            default: {}
        },
    },
    data: function () {
        return {};
    },
    computed: {
        wrapActiveEleId() {
            return this.$root.formConfigActiveEleId;
        },
        // class
        classCompute() {
            var clz = {
                'form-config-ele-wrap-active' : this.ele.id == this.wrapActiveEleId
            };
            jo.forEach(this.ele.classList, function (c) {
                if (c) {
                    clz[c] = true;
                }
            });
            return clz;
        },
        // 样式style
        styleCompute() {
            var style = {};
            jo.forEach(this.ele.styleList, function (item) {
                if (item.name && item.value) {
                    style[item.name] = item.value;
                }
            });
            return style;
        },
    },
    template: `
        <form-config-ele-instance class="form-config-ele-wrap"
            :ele="ele"
            :class="classCompute"
            :style="styleCompute"
            @click.stop="eleWrapChecked(ele)"
            @mouseover.stop="eleWrapMouseOver($event, ele)"
            @mouseout.stop="eleWrapMouseOut($event, ele)"
            draggable="true"
            @dragstart.stop.self="dragStartEle($event, ele)"
            @dragend.stop.self="dragEndEle($event, ele)"
            @dragover.stop.prevent="dragOverEle($event, ele)"
            @drop.stop="dropEle($event, ele)"
        >
        </form-config-ele-instance>
    `,
    methods: {
        eleWrapMouseOver(event, ele) {
            if (!$(event.currentTarget).hasClass('form-config-ele-wrap-hover')) {
                $(event.currentTarget).addClass('form-config-ele-wrap-hover');
            }
        },
        eleWrapMouseOut(event, ele) {
            if ($(event.currentTarget).hasClass('form-config-ele-wrap-hover')) {
                $(event.currentTarget).removeClass('form-config-ele-wrap-hover');
            }
        },
        // 页面配置中组件选中
        eleWrapChecked(ele) {
            if (this.$root.formConfigActiveEle && this.$root.formConfigActiveEle.id === ele.id) {
                this.$root.formConfigActiveEle = null;
            } else {
                this.$root.formConfigActiveEle = ele;
            }
        },
        // 组件拖拽开始
        dragStartEle(event, ele) {
            this.$root.dragStartEleWrap(event, ele);
        },
        // 组件拖拽结束
        dragEndEle(event, ele) {
            this.$root.dragEndEleWrap(event, ele);
        },
        // 组件拖拽在目标对象拖动
        dragOverEle(event, ele) {
            this.$root.dragOverEleWrap(event, ele);
        },
        // 拖放组件
        dropEle(event, ele) {
            this.$root.dropEleWrap(event, ele);
        },
    }
});
joEl.register('form-config-ele-instance', {
    props: {
        ele: {
            type: Object,
            default: {}
        },
    },
    data: function () {
        return {};
    },
    computed: {
        wrapActiveEleId() {
            return this.$root.formConfigActiveEleId;
        },
        // 有子组件
        hasChildren() {
            return this.ele.childrenList && this.ele.childrenList.length > 0;
        },
    },
    template: `
        <template v-if="ele.type=='gridRow'">
            <el-row >
                <template v-if="hasChildren">
                    <form-config-ele-wrap v-for="child in ele.childrenList" :ele="child"></form-config-ele-wrap>
                </template>
                <template v-else="">&nbsp;&nbsp;&nbsp;&nbsp;</template>
            </el-row>
        </template>
        <template v-else-if="ele.type=='gridCol'">
            <el-col >
                 <template v-if="hasChildren">
                    <form-config-ele-wrap v-for="child in ele.childrenList" :ele="child"></form-config-ele-wrap>
                </template>
                <template v-else="">&nbsp;&nbsp;&nbsp;&nbsp;</template>
            </el-col>
        </template>
        <template v-else-if="ele.type=='div'">
            <div >
                <template v-if="hasChildren">
                    <form-config-ele-wrap v-for="child in ele.childrenList" :ele="child"></form-config-ele-wrap>
                </template>
                <template v-else="">&nbsp;&nbsp;&nbsp;&nbsp;</template>
            </div>
        </template>
        <template v-else-if="ele.type=='divider'">
            <el-divider class="ele-wrap-no-default-border" ></el-divider>
        </template>
        
        <template v-else-if="ele.type=='form'">
            <el-form label-width="120px">
                <template v-if="hasChildren">
                    <form-config-ele-wrap v-for="child in ele.childrenList" :ele="child"></form-config-ele-wrap>
                </template>
                <template v-else="">&nbsp;&nbsp;&nbsp;&nbsp;</template>
            </el-form>
        </template>
        <template v-else-if="ele.type=='input'">
            <el-form-item label="Activity name">
                <el-input placeholder="Please input" ></el-input>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='textarea'">
            <el-form-item label="Activity name">
                <el-input type="textarea" placeholder="Please input"></el-input>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='inputNumber'">
            <el-form-item label="Activity name">
                <el-input-number :min="1" :max="10" ></el-input-number>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='radio'">
            <el-form-item label="Activity name">
                <el-radio-group>
                    <el-radio label="1">Option 1</el-radio>
                    <el-radio label="2">Option 2</el-radio>
                </el-radio-group>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='checkbox'">
            <el-form-item label="Activity name">
                <el-checkbox-group>
                    <el-checkbox label="Option A" ></el-checkbox>
                    <el-checkbox label="Option B" ></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='select'">
            <el-form-item label="Activity name">
                <el-select placeholder="Select">
                    <el-option label="1" value="Option A"></el-option>
                    <el-option label="2" value="Option B"></el-option>
                </el-select>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='cascade'">
            <el-form-item label="Activity name">
                <el-cascader></el-cascader>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='date'">
            <el-form-item label="Activity name">
                <el-date-picker type="date" placeholder="Pick a day" ></el-date-picker>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='time'">
            <el-form-item label="Activity name">
                <el-date-picker type="datetime" placeholder="Select date and time" ></el-date-picker>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='slider'">
            <el-form-item label="Activity name">
                <el-slider ></el-slider>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='switch'">
            <el-form-item label="Activity name">
                <el-switch ></el-switch>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='color'">
            <el-form-item label="Activity name">
                <el-color-picker show-alpha ></el-color-picker>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='rate'">
            <el-form-item label="Activity name">
                <el-rate ></el-rate>
            </el-form-item>
        </template>
        <template v-else-if="ele.type=='upload'">
            <el-form-item label="Activity name">
                
            </el-form-item>
        </template>
        
        <template v-else-if="ele.type=='text'">
            <span>2</span>
        </template>
        <template v-else="">{{ele}}</template>
    `,
    methods: {},
    mounted() {

    }
});

// , supportValueType: [], defaultValue: '', valueOptions: [], required: false
// 页面配置-值选项常量
const LCP_VALUE_OPTIONS_CONSTANT = {
    BOOLEAN_OPTIONS: [{value: true, text: 'true'}, {value: false, text: 'false'}],
    POSITION_OPTIONS: [{value: 'left', text: 'left'}, {value: 'right', text: 'right'}, {value: 'top', text: 'top'}],
    SIZE_OPTIONS: [{value: 'large', text: 'large'}, {value: 'default', text: 'default'}, {value: 'small', text: 'small'}],
};
// 页面配置-基础组件元数据
const PAGE_CONFIG_COMPONENT_META = {
    'row': {
        name: '栅格-行',
        attrDescriptions: []
    },
    'col': {
        name: '栅格-列',
        attrDescriptions: []
    },
    'div': {
        name: 'DIV',
        attrDescriptions: [
            {attrName: 'id', text: 'id'},
            {attrName: 'v-if', text: 'v-if'},
            {attrName: 'v-show', text: 'v-show插入'},
        ]
    },
    'divider': {
        name: '分割线',
        attrDescriptions: []
    },

    'form': {
        name: '表单容器form',
        attrDescriptions: [
            {attrName: 'model', text: '表单数据对象'},
            {attrName: 'rules', text: '表单验证规则'},
            {attrName: ':inline', text: '行内表单模式', valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS},
            {
                attrName: 'label-position',
                text: '表单域标签的位置',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.POSITION_OPTIONS
            },
            {attrName: 'label-width', text: '标签的宽度'},
            {
                attrName: 'size',
                text: '表单内组件尺寸',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.SIZE_OPTIONS
            },
            {
                attrName: 'disabled',
                text: '是否禁用该表单内的所有组件',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS
            },
        ]
    },
    'input': {
        name: '输入框input',
        attrDescriptions: [
            {attrName: 'label', text: '标题'},
            {attrName: 'label-width', text: '标题宽度'},
            {attrName: 'prop', text: '键名(校验用到)'},
            {
                attrName: 'size',
                text: '表单内组件尺寸',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.SIZE_OPTIONS
            },

            {attrName: 'type', text: '类型(text,其他)'},
            {attrName: 'modelValue', text: '绑定值(modelValue)'},
            {attrName: 'v-model', text: '绑定值(v-model)'},
            {attrName: 'maxlength', text: '最大输入长度'},
            {attrName: 'minlength', text: '最小输入长度'},
            {
                attrName: 'show-word-limit',
                text: '是否显示输入字数统计',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS
            },
            {attrName: 'placeholder', text: '输入框占位文本'},
            {attrName: 'clearable', text: '是否可清空'},
            {attrName: 'disabled', text: '是否禁用'},
            {
                attrName: 'size',
                text: '组件尺寸',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.SIZE_OPTIONS
            },
            {attrName: 'prefix-icon', text: '自定义前缀图标'},
            {attrName: 'suffix-icon', text: '自定义后缀图标'},
            {attrName: 'rows', text: '输入框行数'},
            {attrName: 'autosize', text: 'textarea 高度是否自适应', valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS},
            {attrName: 'readonly', text: '是否只读', valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS},
            {attrName: 'max', text: '最大值'},
            {attrName: 'min', text: '最小值'},
            {attrName: 'step', text: '步长'},
        ]
    },
    'textarea': {
        name: '大文本框textarea',
        attrDescriptions: [
            {attrName: 'label', text: '标题'},
            {attrName: 'label-width', text: '标题宽度'},
            {attrName: 'prop', text: '键名(校验用到)'},
            {
                attrName: 'size',
                text: '表单内组件尺寸',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.SIZE_OPTIONS
            },

            {attrName: 'type', text: '类型(text,其他)'},
            {attrName: 'modelValue', text: '绑定值(modelValue)'},
            {attrName: 'v-model', text: '绑定值(v-model)'},
            {attrName: 'maxlength', text: '最大输入长度'},
            {attrName: 'minlength', text: '最小输入长度'},
            {
                attrName: 'show-word-limit',
                text: '是否显示输入字数统计',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS
            },
            {attrName: 'placeholder', text: '输入框占位文本'},
            {attrName: 'clearable', text: '是否可清空'},
            {attrName: 'disabled', text: '是否禁用'},
            {
                attrName: 'size',
                text: '组件尺寸',
                valueOptions: LCP_VALUE_OPTIONS_CONSTANT.SIZE_OPTIONS
            },
            {attrName: 'rows', text: '输入框行数'},
            {attrName: 'autosize', text: 'textarea 高度是否自适应', valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS},
            {attrName: 'readonly', text: '是否只读', valueOptions: LCP_VALUE_OPTIONS_CONSTANT.BOOLEAN_OPTIONS},
        ]
    },
    'number': {
        name: '数字输入框',
        attrDescriptions: []
    },
    'radio': {
        name: '单选框radio',
        attrDescriptions: []
    },
    'checkbox': {
        name: '多选框checkbox',
        attrDescriptions: []
    },
    'select': {
        name: '下拉选择select',
        attrDescriptions: []
    },
    'cascade': {
        name: '级联选择',
        attrDescriptions: []
    },
    'date': {
        name: '时间选择',
        attrDescriptions: []
    },
    'time': {
        name: '时间选择',
        attrDescriptions: []
    },
    'slider': {
        name: '滑块',
        attrDescriptions: []
    },
    'switch': {
        name: '开关switch',
        attrDescriptions: []
    },
    'color': {
        name: '取色器',
        attrDescriptions: []
    },
    'rate': {
        name: '评分',
        attrDescriptions: []
    },
    'upload': {
        name: '上传',
        attrDescriptions: []
    },
    'text': {
        name: '文字',
        attrDescriptions: []
    },
};
// 元素style样式选项元数据
const PAGE_CONFIG_STYLE_META = [
    {
        name: '尺寸属性',
        children: [
            {name: 'width', text: '宽度'},
            {name: 'min-width', text: '最小宽度'},
            {name: 'max-width', text: '最大宽度'},
            {name: 'height', text: '高度'},
            {name: 'min-height', text: '最小高度'},
            {name: 'max-height', text: '最大高度'},
        ]
    },
    {
        name: '布局/定位属性',
        children: [
            {name: 'display', text: 'display'},
            {name: 'position', text: '定位Position'},
            {name: 'padding', text: '内边距'},
            {name: 'padding-left', text: '左内边距'},
            {name: 'padding-right', text: '右内边距'},
            {name: 'padding-top', text: '上内边距'},
            {name: 'padding-bottom', text: '下内边距'},
            {name: 'margin', text: '外边距'},
            {name: 'margin-left', text: '左外边距'},
            {name: 'margin-right', text: '右外边距'},
            {name: 'margin-top', text: '上外边距'},
            {name: 'margin-bottom', text: '下外边距'},
            {name: 'overflow', text: 'overflow'},
        ]
    },
    {
        name: 'Flex布局',
        children: [
            {name: 'flex-direction', text: 'flex水平方向'},
            {name: 'justify-content', text: '水平轴内容位置'},
            {name: 'align-items', text: '交叉轴内容位置'},
            {name: 'flex-wrap', text: '换行属性'},
            {name: 'flex', text: 'flex'},
        ]
    },
    {
        name: '边框/阴影/背景',
        children: [
            {name: 'border', text: '边框线'},
            {name: 'border-radius', text: '边框弧度'},
            {name: 'box-shadow', text: '阴影'},
            {name: 'background-color', text: '背景色'},
        ]
    },
    {
        name: '文本属性',
        children: [
            {name: 'text-align', text: '文本位置'},
            {name: 'color', text: '字体颜色'},
            {name: 'font-size', text: '字体大小'},
            {name: 'font-weight', text: '字体重量'},
            {name: 'line-height', text: '行高'},
        ]
    },

    {
        name: '其他',
        children: [
            {name: 'cursor', text: '光标样式'},
        ]
    },
];

// 页面配置-组件选项
const PAGE_CONFIG_COMPONENT_OPTIONS = [
    {
        name: 'layout', title: '布局组件', icon: 'fa-cubes',
        componentList: [
            {
                type: 'row', name: '栅格-ROW', icon: 'fa-bars'
            },
            {type: 'col', name: '栅格-COL', icon: 'fa-ellipsis-v'},
            {type: 'div', name: 'DIV容器', icon: 'fa-window-maximize', classList: ['f-c-padding-15']},
            {
                type: 'div',
                name: '布局-上下',
                icon: 'fa-th-large',
                classList: ['qy-flex-y', 'qy-padding-15', 'qy-height-100p'],
                childrenList: [
                    {type: 'div', name: 'DIV容器', classList: ['qy-height-60']},
                    {type: 'div', name: 'DIV容器', classList: ['qy-flex-1']},
                ]
            },
            {
                type: 'div',
                name: '布局-左右',
                icon: 'fa-th-large',
                classList: ['qy-flex', 'qy-padding-15', 'qy-height-100p'],
                childrenList: [
                    {type: 'div', name: 'DIV容器', classList: ['qy-width-250']},
                    {type: 'div', name: 'DIV容器', classList: ['qy-flex-1']},
                ]
            },
            {type: 'divider', name: '分割线', icon: 'fa-bars'},
        ]
    },
    {
        name: 'form', title: '表单项组件', icon: 'fa-keyboard-o',
        componentList: [
            {type: 'form', name: '表单容器', icon: 'fa-object-group'},
            {
                type: 'input', name: '输入框', icon: 'fa-keyboard-o'
            },
            {type: 'textarea', name: '大文本框', icon: 'fa-font'},
            {type: 'number', name: '数字输入框', icon: 'fa-subscript'},
            {type: 'radio', name: '单选框', icon: 'fa-dot-circle-o'},
            {type: 'checkbox', name: '多选框', icon: 'fa-check-square-o'},
            {type: 'select', name: '下拉选择框', icon: 'fa-caret-square-o-down'},
            {type: 'cascade', name: '级联选择器', icon: 'fa-caret-square-o-down'},
            {type: 'date', name: '日期选择', icon: 'fa-calendar'},
            {type: 'time', name: '时间选择', icon: 'fa-clock-o'},
            {type: 'slider', name: '滑块', icon: 'fa-sliders'},
            {type: 'switch', name: '开关', icon: 'fa-toggle-on'},
            {type: 'color', name: '取色器', icon: 'fa-tint'},
            {type: 'rate', name: '评分', icon: 'fa-star-o'},
            {type: 'upload', name: '文件上传', icon: 'fa-file-o'},
        ]
    },
    {
        name: 'base', title: '数据组件', icon: 'fa-table',
        componentList: [
            {type: 'text', name: '文字', icon: 'fa-font'},
        ]
    },
    {
        name: 'high', title: '高级组件', icon: 'fa-map-o',
        componentList: [
            // {type: 'xxx', name: 'xxx', icon: 'xxx'}
        ]
    },
    {
        name: 'chart', title: '图表组件', icon: 'fa-bar-chart',
        componentList: [
            // {type: 'xxx', name: 'xxx', icon: 'xxx'}
        ]
    },
];
